<template>
  <div id="app">
        <div id="fileId"><input type="file" name="fileName" @change="changeImg"></div>
        <hr>
        <div>
            oldImg: <img :src="oldImg.src" alt=""><br>
            <span>{{oldImg.size}}</span>
        </div>
        <div>
            newImg: <img :src="newImg.src" alt=""><br>
            <span>{{newImg.size}}</span>
        </div>
  </div>
</template>

<script>
import request from "request";
import zipImg from "web-compress-img";
console.log(zipImg);
export default {
  name: "app",
  data() {
    return {
      newImg: {
        src: "",
        size: 0
      },
      oldImg: {
        src: "",
        size: 0
      }
    };
  },
  components: {},
  mounted() {},
  methods: {
    changeImg(e) {
      let that = this;
      let file = e.target.files[0]; //图片资源
      //获取base64
      zipImg.getDataUrl(file).then(data => {
        //转码
        that.newImg.src = data;
        that.oldImg.src = data;
      });

      zipImg.loadImage(file, newImg => {
        //获取原图片大小
        that.oldImg.size = zipImg.bytesToSize(newImg.oldFile.size);
        //获取新图片大小
        that.newImg.size = zipImg.bytesToSize(newImg.newFile.size);
      });
    }
  }
};
</script>

<style lang="less">
* {
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#app {
  height: 100%;
  width: 100%;
  font-size: 0.12rem;
}
#app > div {
  float: left;
  width: 50%;
  img {
    max-width: 500px;
  }
  &#fileId {
    clear: both;
    width: 100%;
  }
}
</style>
